<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function  () {
		var oUl = document.getElementById('ul1');
		var aNeed = getByClass( oUl, 'li', 'box' );		//alert(aNeed.length); console.log(aNeed)

		for (var i = 0; i < aNeed.length; i++) {
			aNeed[i].style.backgroundColor ='red';
		};
	}

	function getByClass( parent, tagName, _className ){
		var aTag = parent.getElementsByTagName(tagName);
		var arr = [];

		for (var i = 0; i < aTag.length; i++) {
			var aClassName = aTag[i].className.split(' ');			//alert(aClassName); => [box,box]、[]、[box,box1,box2]、[]
			for (var j = 0; j < aClassName.length; j++) {
				if (aClassName[j] == _className) {
					arr.push(aTag[i]);
					break;		//找到一个就跳出当前j数组，前往j+1数组查找的循环
				};
			};
		};
		//alert(arr[0])		//[obj_Li],[obj_Li]
		return arr;			//arr是由对象构成的数组
	}
	
	</script>
</head>
<body>
	<ul id="ul1">
		<li class="box box">111</li>		<!-- 假如不小心写重复了时也要考虑进去 
		用break解决-->
		<li>222</li>
		<li class="box box1 box2">333</li>
		<li>444</li>
	</ul>
	<p class="box">ppppp</p>
</body>
</html>